<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查询</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.4/dist/css/layui.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        div {
            padding: 0;
            margin: 0;
        }

        .div_select {
            width: 70%;
            float: left;
            margin-bottom: 35px;
        }

        .div_select1 {
            flex: 1;
            float: left;
            margin-left: 120px;
        }

        .div_show {
            width: 70%;
        }
        .div_blevel{
            margin-left: 20px;
        }
        .div_showb {
            flex: 1;
            /*width: 35%;*/
            float: left;
            /*border: solid black 0.5px;*/
            /*margin-bottom: 35px;*/
            margin-left: 50px;
        }

        .div_showc {
            flex: 1;
            float: left;
            /*width: 35%;*/
            /*border: solid black 0.5px;*/
            margin-left: 50px;
        }

        .img_td {
            width: 172px;
            display: inline-block;
        }
    </style>
    <script type="text/javascript" src="webjars/jquery/3.5.0/jquery.js"></script>
    <script type="text/javascript" th:inline="javascript">
        //只能访问(表单提交)到书籍或课程其中(后面)的一个网址
        /*<![CDATA[*/
        // function isSubmita() {
        //     isSubmitb();
        //     isSubmitc();
        // }
        // function isSubmitb(){
        //
        //    alert("1");
        //     // "form_book":看好了是不是表单的id
        //    document.getElementById("form_book").submit();
        //
        //
        // }
        // function isSubmitc(){
        //
        //     alert("1");
        //     // "form_book":看好了是不是表单的id
        //
        //
        //     document.getElementById("form_coursera").submit();
        // }


        /*]]>*/
    </script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container ">
        <div class="navbar-header ">

            <a class="navbar-brand" href="#">数据集的查询系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse ">
            <ul class="nav navbar-nav navbar-right">
                <!--                <li><a th:href="@{/login}">登录</a></li>-->
                <!--                <li><a th:href="@{regist.html}">注册</a></li>-->
                <li><a th:href="@{/}">返回首页</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!--<h1>成功</h1>-->
<div>
    <div class="div_select">

        <div class="div_select1">
            <form action="login_success.html" th:action="@{/user/book/select/book}" method="post" id="form_book"
                  name="form_book">

                <input class="itxt" type="text" placeholder="请输入所属类别" autocomplete="off" tabindex="1" name="bname"
                       id="bname"/>
                <br/>
                <br/>
                <input type="submit" value="查询书籍" class="sub_btn" id="sub_b"/>
                <!--                    <input type="button" th:onclick="'javascript:isSubmitb();'" value="查询书籍">-->
            </form>
        </div>
        <div class="div_select1">
            <form action="login_success.html" th:action="@{/user/coursera/select/coursera}" method="post"
                  id="form_coursera" name="form_coursera">

                <input class="itxt" type="text" placeholder="请输入所属类别" autocomplete="off" tabindex="1" name="cname"
                       id="cname"/>
                <br/>
                <br/>
                <input type="submit" value="查询课程" class="sub_btn" id="sub_c"/>
            </form>
        </div>
        <div class="div_select1">
            <form action="login_success.html" th:action="@{/user/select/bc}" method="post">

                <input class="itxt" type="text" placeholder="请输入所属类别" autocomplete="off" tabindex="1" name="level"
                       id="level"/>
                <br/>
                <br/>
                <input type="submit" value="查询书籍和课程" class="sub_btn" id="sub_all"/>
            </form>
        </div>

        <!--                js处理一个网页两个表单提交到两个不同的action-->
        <!--                第一步. 在页面里面加入2个隐藏的iframe, 如下：-->
        <!--                <iframe name="form_target_1" style="display:none;"></iframe>-->

        <!--                <iframe name="form_target_2" style="display:none;"></iframe>-->

        <!--                第二步. 表单设置target属性：-->

        <!--                <form name="form_1" target="form_target_1">...</form>-->
        <!--                <form name="form_2" target="form_target_2">...</form>-->

        <!--                    第三步. 按钮提交事件：-->

        <!--                <button onclick="form_1.submit(); form_2.submit();">提交</button>-->
        <!--                <button id="sub_all" th:onclick="'javascript:isSubmitb();'" >查询课程和书籍</button>-->
        <!--                <button id="sub_all" onclick="isSubmita()" >查询课程和书籍</button>-->
        <!--                <button id="sub_all" onclick="form_book.submit();form_coursera.submit();" >查询课程和书籍</button>-->
        <!--                <form action="login_success.html" th:action="@{/user/book/select}" method="post">-->

        <!--                    <input class="itxt"  type="text" placeholder="请输入所属类别"  autocomplete="off" tabindex="1" name="level" id="level"/>-->
        <!--                    <br />-->
        <!--                    <br />-->
        <!--                    <input type="submit" value="查询书籍和课程" class="sub_btn" id="sub_all"/>-->
        <!--                </form>-->
        <!--                <input id="textkey" type="text" th:value=""><span><a  class="all" th:href="|javascript:getkey(this)|" onclick="getkey(this)">查询所有</a>-->
        <!--                <a th:href="'select/book/'+key" class="abook" >查询书籍</a>-->
        <!--                <a th:href="|javascript:getkey(this)|" class="acoursera" onclick="getkey(this)">查询课程</a></span>-->
    </div>
    <div class="row div_show">

<!--        <div class="div_blevel">-->

<!--            <table>-->
<!--                <thead>-->
<!--                <tr>-->
<!--                    <th>书籍类别：</th>-->
<!--                </tr>-->
<!--                </thead>-->
<!--                <tbody th:each="blevel:${bookLevel}">-->
<!--                <tr>-->
<!--                    <td><span th:text="${blevel}"/></td>-->
<!--                </tr>-->
<!--                </tbody>-->
<!--            </table>-->

<!--        </div>-->

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main div_showb">
            <h2 class="sub-header" th:if="${not #lists.isEmpty(listByKeyBook)}">书籍查询</h2>
            <div class="table-responsive">
                <table class="table table-striped" th:if="${not #lists.isEmpty(listByKeyBook)}">
                    <thead>
                    <tr>
                        <th>图片：</th>
                        <th>书名：</th>
                        <th>链接：</th>
                        <th>作者：</th>
                        <th>价格：</th>
                        <th>所属类别：</th>
                    </tr>
                    </thead>
                    <tbody th:each="book:${listByKeyBook}">
                    <tr>
                        <td><span class="img_td"><img th:src="${book.getBImg()}"/></span></td>
                        <td><span th:text="${book.getBName()}"/></td>
                        <td><a th:text="书籍链接" th:href="${book.getBLink()}"/></td>
                        <td><span th:text="${book.getBAuthor()}"/></td>
                        <td><span th:text="${book.getBPrice()}"/></td>
                        <td><span th:text="${book.getBLevel()}"/></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main div_showc">
            <h2 class="sub-header" th:if="${not #lists.isEmpty(listByKeyCoursera)}">课程查询</h2>
            <div class="table-responsive">
                <table class="table table-striped" th:if="${not #lists.isEmpty(listByKeyCoursera)}">
                    <thead>
                    <tr>
                        <th>图片：</th>
                        <th>课程名：</th>
                        <th>所属大学：</th>
                        <th>链接：</th>
                        <th>所属类别：</th>
                    </tr>
                    </thead>
                    <tbody th:each="coursera:${listByKeyCoursera}">
                    <tr>
                        <td><span><img th:src="${coursera.getCImg()}"/></span></td>
                        <td><span th:text="${coursera.getCName()}"/></td>
                        <td><span th:text="${coursera.getCUniversity()}"/></td>
                        <td><a th:text="课程链接" th:href="'https://www.coursera.org'+${coursera.getCLink()}"/></td>
                        <td><span th:text="${coursera.getCLevel()}"/></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!--    <div class="div_show">-->
    <!--        <div class="div_showb">-->
    <!--            <table th:if="${not #lists.isEmpty(listByKeyBook)}">-->
    <!--                <tr>-->
    <!--                    &lt;!&ndash;                        <th>序号：</th>&ndash;&gt;-->
    <!--                    <th>书名：</th>-->
    <!--                    <th>链接：</th>-->
    <!--                    <th>作者：</th>-->
    <!--                    <th>价格：</th>-->
    <!--                    <th>所属类别：</th>-->
    <!--                </tr>-->
    <!--                <tr th:each="book:${listByKeyBook}">-->
    <!--                    &lt;!&ndash;                        <td>&ndash;&gt;-->
    <!--                    &lt;!&ndash;                            <span th:text="${book.getBId()}"/>&ndash;&gt;-->
    <!--                    &lt;!&ndash;                        </td>&ndash;&gt;-->
    <!--                    <td>-->
    <!--                        <span th:text="${book.getBName()}"/>-->
    <!--                    </td>-->
    <!--                    <td>-->
    <!--                        <a th:text="书籍链接" th:href="'https://www.amazon.cn/'+${book.getBLink()}"/>-->
    <!--                    </td>-->
    <!--                    <td>-->
    <!--                        <span th:text="${book.getBAuthor()}"/>-->
    <!--                    </td>-->
    <!--                    <td>-->
    <!--                        <span th:text="${book.getBPrice()}"/>-->
    <!--                    </td>-->
    <!--                    <td>-->
    <!--                        <span th:text="${book.getBLevel()}"/>-->
    <!--                    </td>-->

    <!--                </tr>-->
    <!--            </table>-->
    <!--        </div>-->

    <!--    <div class="div_showc">-->
    <!--        <table th:if="${not #lists.isEmpty(listByKeyCoursera)}">-->
    <!--            <tr>-->
    <!--                &lt;!&ndash;                        <th>序号：</th>&ndash;&gt;-->

    <!--                <th>课程名：</th>-->
    <!--                <th>所属大学：</th>-->
    <!--                <th>评分：</th>-->
    <!--                <th>链接：</th>-->
    <!--                <th>所属类别：</th>-->

    <!--            </tr>-->

    <!--            <tr th:each="coursera:${listByKeyCoursera}">-->
    <!--                &lt;!&ndash;                        <td>&ndash;&gt;-->
    <!--                &lt;!&ndash;                            <span th:text="${coursera.getCId()}"/>&ndash;&gt;-->
    <!--                &lt;!&ndash;                        </td>&ndash;&gt;-->
    <!--                <td>-->
    <!--                    <span th:text="${coursera.getCName()}"/>-->
    <!--                </td>-->
    <!--                <td>-->
    <!--                    <span th:text="${coursera.getCUniversity()}"/>-->
    <!--                </td>-->
    <!--                <td>-->
    <!--                    <span th:text="${coursera.getCScore()}"/>-->
    <!--                </td>-->

    <!--                <td>-->
    <!--                    <a th:text="课程链接" th:href="'https://www.coursera.org'+${coursera.getCLink()}"/>-->
    <!--                </td>-->
    <!--                <td>-->
    <!--                    <span th:text="${coursera.getCLevel()}"/>-->
    <!--                </td>-->
    <!--            </tr>-->
    <!--        </table>-->
    <!--    </div>-->
</div>

<div>

</div>


</body>
</html>